<template>
    <div>
        <el-page-header @back="back" content="客户阶段设置"></el-page-header>
        <div class="interspaceH"></div>
        <div class="m-alert">
            <span class="el-icon-info"></span>
            <div>
                <div>可移动客户阶段并在下方的流程中查看阶段位置</div>
            </div>
            <el-dialog :title="formType == 'add' ? '添加阶段' : '修改阶段'" :visible.sync="stageVisible" width="35%" :close-on-click-modal="false">
<!--                <div class="m-alert" style="align-items: center;">
                    <span class="el-icon-message-solid" style="color: #35abff;margin-right: 10px;"></span>
                    <div>
                        <div>提示：「未联系提醒功能」需员工开通会话存档接口后才能生效</div>
                    </div>
                </div>

                <div class="interspaceH"></div>-->

                <el-form ref="stageForm" :model="stageForm" label-position="left" label-width="120px">
                    <el-form-item label="阶段名称" prop="clientStatusName" :rules="[{ required: true, message: '请输入阶段名称', trigger: 'blur' }]">
                        <el-input v-model="stageForm.clientStatusName" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="阶段描述">
                        <el-input v-model="stageForm.clientStatusDescription" type="textarea" size="small"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="员工跟进提醒">
                        <el-switch v-model="stageForm.empAlert"></el-switch>
                    </el-form-item>

                    <div v-if="stageForm.empAlert" style="display: flex; align-items: center;align-content: center">
                        <el-select v-model="stageForm.empType" style="width: 120px" size="small">
                            <el-option label="停留时间" value="1"></el-option>
                            <el-option label="未联系" value="2"></el-option>
                        </el-select>
                        <div style="margin: 0 10px">超过</div>
                        <el-input v-model="stageForm.empDay" style="width: 100px" size="small"></el-input>
                        <div style="margin: 0 10px">天后，次日</div>
                        <el-time-picker style="width: 130px" v-model="stageForm.empAlertTime" value-format="HH:mm:ss"
                                        size="small"></el-time-picker>
                        <div style="margin: 0 10px">提醒</div>
                    </div>

                    <div style="padding: 10px;margin: 15px 0;border-radius: 5px;background-color: #f3f3f3">
                        您的客户【客户名字】在【{{ stageForm.clientStatusName }}】阶段停留了【{{ stageForm.empDay }}天】了，请前去跟进
                    </div>

                    <el-form-item label="管理员提醒">
                        <el-switch v-model="stageForm.manageAlert"></el-switch>
                    </el-form-item>

                    <div v-if="stageForm.manageAlert" style="display: flex; align-items: center;align-content: center">
                        <el-select v-model="stageForm.manageType" style="width: 120px" size="small">
                            <el-option label="停留时间" value="1"></el-option>
                            <el-option label="未联系" value="2"></el-option>
                        </el-select>
                        <div style="margin: 0 10px">超过</div>
                        <el-input v-model="stageForm.manageDay" style="width: 100px" size="small"></el-input>
                        <div style="margin: 0 10px">天后，次日</div>
                        <el-time-picker style="width: 130px" v-model="stageForm.manageAlertTime" value-format="HH:mm:ss"
                                        size="small"></el-time-picker>
                        <div style="margin: 0 10px">提醒</div>
                    </div>

                    <div style="padding: 10px;margin: 15px 0;border-radius: 5px;background-color: #f3f3f3">
                        您的下属员工【员工名字】的客户【客户名字】在【{{ stageForm.clientStatusName }}】阶段停留了【{{
                            stageForm.manageDay
                        }}天】了，请提醒他去跟进
                    </div>-->

                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="submitHandle" size="small">确定</el-button>
                        <el-divider direction="vertical"></el-divider>
                    <el-button @click="stageVisible = false" size="small">返回</el-button>
                </span>
            </el-dialog>
        </div>

        <div class="interspaceH"></div>

        <el-button class="el-icon-circle-plus-outline" type="primary" @click="openStageHandle('add')">添加阶段</el-button>

        <div class="interspaceH"></div>

        <el-card style="align-items: center;align-content: center" class="flow">
            <div v-for="(item, index) in stageList" :key="index" style="display:flex;align-items: center;">
                <div style="margin-right: 20px">{{ item.clientStatusName }}</div>
                <el-icon v-if="index + 1 != stageList.length" class="el-icon-right"
                         style="margin-right: 20px"></el-icon>
            </div>
        </el-card>

        <div class="interspaceH"></div>

        <draggable v-model="stageList" @update="datadragEnd" :options="{animation:500}">
            <transition-group>
                <div v-for="item in stageList" :key="item.clientStatusId" class="drag-item">
                    <el-card>
                        <div style="display:flex;align-items: center;font-size: 14px;height: 60px;">
                            <div style="flex: 8">阶段：{{ item.clientStatusName }}</div>
                            <div style="flex: 0.01;border-left: 0.5px solid #DCDFE6;height: 100%;margin: 0 20px 0 5px"></div>
                            <div style="flex: 8">阶段描述：{{ item.clientStatusDescription }}</div>
                            <div style="flex: 0.01;border-left: 0.5px solid #DCDFE6;height: 100%;margin: 0 20px 0 5px"></div>
                            <div style="flex: 72">
                                <div v-if="item.empAlert">{{ item.empContent }}</div>
                                <div v-if="item.manageAlert">{{ item.manageContent }}</div>
                            </div>
                            <div style="flex: 0.01;border-left: 0.5px solid #DCDFE6;height: 100%;margin: 0 20px 0 5px"></div>
                            <div style="flex: 8">
                                <el-button type="text" @click="deleteHandle(item.clientStatusId)">删除</el-button>
                                <el-button type="text" @click="openStageHandle('edit', item)">编辑</el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            </transition-group>
        </draggable>
    </div>
</template>

<script>
import draggable from 'vuedraggable'

const stageForm = {
    clientStatusName: '',
    clientStatusDescription: '',
    empAlert: false,
    manageAlert: false,
    empType: '1',
    empDay: '0',
    empAlertTime: '',
    manageType: '1',
    manageDay: '0',
    manageAlertTime: ''
}

export default {
    name: "create_stage",
    components: {
        draggable
    },
    data() {
        return {
            stageVisible: false,
            stageForm: {...stageForm},
            stageList: [],
            formType: "add"
        }
    },
    mounted() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        }
        this.queryDataHandle()
    },
    methods: {
        back() {
            this.$emit("currentHandle", "default")
        },
        queryDataHandle() {
            let that = this
            this.$request("/api/clientStage/queryClientStageByParams/1_0", {}, "POST").then((data) => {
                let dataSource = data.rows
                let stageList = []

                dataSource.map((item) => {
                    stageList.push({
                        ...item,
                        manageAlert: JSON.parse(item.manageAlert),
                        empAlert: JSON.parse(item.empAlert),
                        empContent: `您的客户【客户名字】在【${item.clientStatusName}】阶段停留了【${item.empDay}天】了，请前去跟进`,
                        manageContent: `您的下属员工【员工名字】的客户【客户名字】在【${item.clientStatusName}】阶段停留了【${item.manageDay}天】了，请提醒他去跟进`
                    })
                })

                that.stageList = [...stageList]
            })
        },
        openStageHandle(type, data) {
            if (type == "add") {
                this.stageForm = {...stageForm}
                this.formType = type
            } else if (type == "edit") {
                this.formType = type
                this.stageForm = {...data}
            }

            this.stageVisible = true
        },
        datadragEnd(evt) {
            evt.preventDefault();
            let list = [...this.stageList]
            let newList = []
            for (let i = 0; i < list.length; i++) {
                newList.push({
                    clientStatusId: list[i]['clientStatusId'],
                    sort: i.toString()
                })
            }

            this.$request("/api/clientStage/updateClientStage/1_0", {stageList: newList}, "POST")
        },
        deleteHandle(id) {
            this.$confirm('确定要删除吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$request("/api/clientStage/deleteStageById/1_0?stageId=" + id, "", "GET").then((data) => {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    })
                    this.queryDataHandle()
                })
            })
        },
        submitHandle() {
            let that = this
            that.$refs.stageForm.validate((valid) => {
                if (!valid) {
                    return false;
                }

                let data = {...that.stageForm}

                data['empAlert'] = data['empAlert'].toString()

                data['manageAlert'] = data['manageAlert'].toString()

                data['empAlertTime'] = that.$moment(data['empAlertTime']).valueOf();

                data['manageAlertTime'] = that.$moment(data['manageAlertTime']).valueOf();

                let url = ""

                if (that.formType == 'add') {
                    data['sort'] = that.stageList.length.toString()
                    url = "/api/clientStage/addClientStage/1_0"
                } else {
                    url = "/api/clientStage/updateClientStage/1_0"
                }

                that.$request(url, data, "POST").then((data) => {
                    that.$message.success("添加客户阶段成功！")
                    that.stageForm = {...stageForm}
                    that.queryDataHandle()
                })
                that.stageVisible = false
            })
        }
    }
}
</script>

<style>
.flow .el-card__body {
    display: flex;
}
</style>

<style scoped>
.drag-item {
    width: 100%;
    height: 70px;
    line-height: 50px;
    position: relative;
    background: #ddd;
    margin-bottom: 50px;
}

.el-icon-info {
    color: #35abff;
    margin-right: 10px;
}
</style>
